<template>
  <!-- 审批通用页面组件 -->
  <div class="wrapper">
    <div class="title">{{ name }}</div>
    <title-name
      v-if="!isBatch"
      :title="processName + '-' + taskName"
    />
    <BatchTable
      v-if="isBatch"
      @completeTaskBathFn="completeTaskBathFn"
      @clickTabRouter="clickTabRouter"
    />
    <a-card
      :body-style="{ padding: '24px 32px' }"
      :bordered="false"
    >
      <template v-if="!isBatch">
        <title-name title="节点信息" />
        <slot name="extraResult" />
        <a-descriptions
          class="mb20"
          title=""
        >
          <a-descriptions-item label="当前节点">
            {{ taskName }}
          </a-descriptions-item>
          <a-descriptions-item label="审批人">
            {{ currentUser.name }}
          </a-descriptions-item>
          <a-descriptions-item label="审批时间">
            {{ currentTime }}
          </a-descriptions-item>
        </a-descriptions>
        <!--        <div-->
        <!--          v-if="assignType"-->
        <!--          class="mb20"-->
        <!--        >-->
        <!--          <title-name title="指派人员" />-->
        <!--          <a-form-model-->
        <!--            ref="ruleForm"-->
        <!--            :model="form"-->
        <!--            :label-col="{ lg: { span: 6 }, sm: { span: 6 } }"-->
        <!--            :wrapper-col="{ lg: { span: 16 }, sm: { span: 16 } }"-->
        <!--          >-->
        <!--            <a-row :gutter="24">-->
        <!--              <a-col-->
        <!--                v-if="assignType == '3'"-->
        <!--                :md="12"-->
        <!--                :sm="12"-->
        <!--                class="col"-->
        <!--              >-->
        <!--                <a-form-model-item-->
        <!--                  label="组织"-->
        <!--                  prop="orgSelectedName"-->
        <!--                >-->
        <!--                  <TreeSelectOrganization-->
        <!--                    v-model="form.orgSelectedName"-->
        <!--                    :org-selected-value.sync="form.orgSelectedName"-->
        <!--                    :org-selected-label.sync="form.orgSelectedLabel"-->
        <!--                    :children-node="childrenNode"-->
        <!--                  />-->
        <!--                </a-form-model-item>-->
        <!--              </a-col>-->
        <!--              <a-col-->
        <!--                v-if="assignType == '3'"-->
        <!--                :md="12"-->
        <!--                :sm="12"-->
        <!--                class="col"-->
        <!--              >-->
        <!--                <a-form-model-item-->
        <!--                  label="岗位"-->
        <!--                  prop="jobsSelectedName"-->
        <!--                >-->
        <!--                  <Jobs-->
        <!--                    v-model="form.jobsSelectedName"-->
        <!--                    :selected-value.sync="form.jobsSelectedName"-->
        <!--                    :tree-checkable="treeCheckable"-->
        <!--                    :add-titel="form.orgSelectedLabel[0]"-->
        <!--                  />-->
        <!--                </a-form-model-item>-->
        <!--              </a-col>-->
        <!--              <a-col-->
        <!--                v-else-->
        <!--                :md="12"-->
        <!--                :sm="12"-->
        <!--                class="col"-->
        <!--              >-->
        <!--                <a-form-model-item-->
        <!--                  label="指派人员"-->
        <!--                  prop="respEmployeeId"-->
        <!--                >-->
        <!--                  <OrgStaffAsync-->
        <!--                    v-model="form.respEmployeeId"-->
        <!--                    :selected-value.sync="form.respEmployeeId"-->
        <!--                    :tree-checkable="assignType != '1'"-->
        <!--                  />-->
        <!--                </a-form-model-item>-->
        <!--              </a-col>-->
        <!--            </a-row>-->
        <!--          </a-form-model>-->
        <!--        </div>-->
      </template>
      <slot name="extraOption" />

      <template v-if="!isBatch">
        <!-- 流程监控会有monitoringType参数，流程监控不等于处理不显示 -->
        <title-name title="审批意见" />
        <a-form
          ref="form1"
          :form="form"
        >
          <!-- 流程监控会有monitoringType参数，流程监控不等于处理不显示 -->
          <a-form-item class="approval-item">
            <BaseTextarea
              v-model="opinions"
              :disabled="$route.query.isMonitoring ? ($route.query.monitoringType==='process' ? false: true): false"
              placeholder="请填写审批意见"
            />
          </a-form-item>
          <slot name="extraMiddle" />
          <!-- $route.query.isMonitoring为'true'时是流程监控需要判断是否是处理，否则直接显示 -->
          <Consultation
            :proc-inst-id="procInstId"
            :is-show-btn="$route.query.isMonitoring ? ($route.query.monitoringType==='process' ? true: false): true"
            :task-name="taskName"
            :sub-approver-list.sync="subApproverList"
          >
            <template slot="approverButton">
              <a-button
                v-if="buttonConfig.no.isShow"
                type="primary"
                @click="handelUnApproval"
              >
                {{ buttonConfig.no.title }}
              </a-button>
              <a-button
                v-if="buttonConfig.ok.isShow"
                type="primary"
                @click="handelApproval"
              >
                {{ buttonConfig.ok.title }}
              </a-button>
            </template>
          </Consultation>
        </a-form>
      </template>

      <slot name="extraOption2" />
      <a-collapse
        v-model="activeKey"
        v-if="isBatch"
      >
        <a-collapse-panel
          key="1"
          header="节点信息"
        >
          <template>
            <slot name="extraResult" />
            <a-descriptions
              class="mb20"
              title=""
            >
              <a-descriptions-item label="当前节点">
                {{ taskName }}
              </a-descriptions-item>
              <a-descriptions-item label="审批人">
                {{ currentUser.name }}
              </a-descriptions-item>
              <a-descriptions-item label="审批时间">
                {{ currentTime }}
              </a-descriptions-item>
            </a-descriptions>
          </template>
          <template>
            <title-name title="审批流程信息" />
            <div class="btns-wrapp mb20">
              <a-button
                type="primary"
                @click="visibleState.auditProcess = true"
              > 审批流程图 </a-button>
            </div>
            <a-spin
              tip="流程信息加载中..."
              :spinning="flowRequesting"
            />
            <a-table
              :columns="columnApprove"
              :data-source="approveInfos"
              bordered
            >
              <span
                slot="serial"
                slot-scope="text, record, index"
              >{{ index + 1 }}</span>
              <template
                slot="opinions"
                slot-scope="text, record"
              >
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    <span> {{ record.formData.opinions }}</span>
                  </template>
                  <span> {{ record.formData.opinions }}</span>
                </a-tooltip>
              </template>
            </a-table>
          </template>
        </a-collapse-panel>
        <a-collapse-panel
          key="2"
          header="意见征询列表"
          :disabled="false"
        >
          <Consultation
            v-if="isBatch"
            :proc-inst-id="procInstId"
            style="margin-top: 10px"
            :isShowBtn="false"
            @getData="getData"
          />
        </a-collapse-panel>
      </a-collapse>
      <template v-if="!isBatch">
        <title-name title="审批流程信息" />
        <div class="btns-wrapp mb20">
          <a-button
            type="primary"
            @click="visibleState.auditProcess = true"
          > 审批流程图 </a-button>
        </div>
        <a-spin
          tip="流程信息加载中..."
          :spinning="flowRequesting"
        />
        <a-table
          :columns="columnApprove"
          :data-source="approveInfos"
          bordered
        >
          <span
            slot="serial"
            slot-scope="text, record, index"
          >{{ index + 1 }}</span>
          <template
            slot="opinions"
            slot-scope="text, record"
          >
            <a-tooltip placement="topLeft">
              <template slot="title">
                <span> {{ record.formData.opinions }}</span>
              </template>
              <span> {{ record.formData.opinions }}</span>
            </a-tooltip>
          </template>
        </a-table>
      </template>
    </a-card>

    <slot name="extraAfter" />

    <ApprovalDetails
      :title="'审批流程信息'"
      :business-id="bId"
      :visible="visibleState.auditProcess"
      @cancel="visibleState.auditProcess = false"
      @confirm="visibleState.auditProcess = false"
    />
    <AuditBusinessDetail v-if="isNeedDetails && clickTabLoad" />
  </div>
</template>

<script>
import ApprovalDetails from '@/components/approvalDetails'
import AuditBusinessDetail from '@/views/matters/AuditBusinessDetail'
import { getFlowChart } from '@/api/process'
import { getProcessNodeList, completeTask, completeTaskBath } from '@/api/process'
import { getOrgEmployeesListBy } from '@/api/commons'
import TreeSelectOrganization from '@/components/TreeSelectOrganization'
import OrgStaffAsync from '@/components/TreeSelectOrganization/orgStaffAsync.vue'
import Jobs from '@/components/TreeSelectOrganization/jobs'
import moment from 'moment'
import Vue from 'vue'
import { notifyParentWindow } from '@/utils/util.js'
import { Collapse } from 'ant-design-vue'
import Consultation from './consultation'
import BatchTable from './batchTable'
import pick from 'lodash.pick'
import { projectCompletionDetail } from '@/api/projects'

const columnApprove = [
  {
    title: '序号',
    width: 80,
    align: 'center',
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '审批人',
    dataIndex: 'userName',
    ellipsis: true,
    width: 180
  },
  {
    title: '审批时间',
    dataIndex: 'endTime',
    ellipsis: true,
    width: 180
  },
  {
    title: '节点名称',
    dataIndex: 'taskName',
    ellipsis: true,
    width: 180
  },
  {
    title: '滞留时间',
    dataIndex: 'durationInMillis',
    ellipsis: true,
    width: 140
  },
  {
    title: '审批意见',
    dataIndex: 'formData.opinions',
    scopedSlots: { customRender: 'opinions' },
    ellipsis: true
  }
]

export default {
  name: 'Approval',
  components: {
    AuditBusinessDetail,
    ApprovalDetails,
    Consultation,
    BatchTable,
    ACollapse: Collapse,
    ACollapsePanel: Collapse['Panel']
  },
  props: {
    text: String,
    /**
     * 审批时的回调，返回false时，会阻止审批；返回true时，则正常进行后续流程
     * @param {String} flag enum: 'approval' || 'unApproval'   通过 || 不通过
     */
    callbackFn: {
      type: [Function, Object],
      default: null
    },
    /*
     * 提交之后
     * */
    beforeSubmitFn: {
      type: [Function, Object],
      default: null
    },
    submitData: {
      type: Object,
      default() {
        return {}
      }
    },
    buttonConfig: {
      type: Object,
      default() {
        return {
          no: {
            isShow: true,
            title: '审批不通过'
          },
          ok: {
            isShow: true,
            title: '审批通过'
          }
        }
      }
    },
    isNeedDetails: {
      type: Boolean,
      default() {
        return true
      }
    },
    isBatch: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  data() {
    return {
      visibleState: {
        auditProcess: false
      },
      flowChart: '', // 流程图base64
      loading: {
        flowChart: false
      },
      form: {
        orgSelectedName: '',
        orgSelectedLabel: '',
        jobsSelectedName: undefined, //岗位
        respEmployeeId: undefined //人员
      },
      treeCheckable: true,

      childrenNode: 'jobs',

      columnApprove,
      opinions: '',
      approveInfos: [], // 审批流程信息
      procInstId: '', //当前流程实例ID
      taskId: '', //当前流程节点ID
      processName: '', //流程名称
      taskName: '', //当前流程节点名称
      taskDefKey: '', //任务标识
      currentTime: '', //当前审批时间
      currentUser: '', //当前审批人
      flowRequesting: false,
      detailUrl: null, //详情地址

      assignType: '', //节点类型   0 变量获取 1 处理人 2 候选人 3 候选组 4 会签
      assignCode: '', //候选组编码 岗位编码
      assignLevel: '', //层级 项目部 PD 分公司 BC 公司 CO
      businessType: '', //业务类型 0 项目
      completedType: '',
      name: this.isBatch ? '批量审批' : '审批',
      // 下级审批人
      subApproverList: [],
      activeKey: ['1', '2'],
      completedData: {
        completionTime: '',
        remark: '',
        fileList: [],
      },
      completedLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 7 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 13 }
        }
      },
      // 批量审批切换加载
      clickTabLoad: true
    }
  },
  computed: {
    bId() {
      if(this.processName.indexOf('设计策划书纳入知识库') > -1) {
        return this.id + '_knowledge'
      }
      return this.id
    }
  },
  created() {
    this.init()
  },
  mounted() {
    this.getFlowChartReq()
    this.$bus.$on('handelUnApprovalCopy', this.handelUnApprovalCopy)
    this.$bus.$on('handelApprovalCopy', this.handelApprovalCopy)
  },
  destroyed() {
    this.$bus.$off('handelUnApprovalCopy')
    this.$bus.$off('handelApprovalCopy')
  },
  methods: {
    getEditInfo() {
      const { businessType, businessId } = this.$route.query
      this.completedType = businessType
      if(this.completedType == 129) {
        projectCompletionDetail(businessId).then(res=> {
          if(res.code==200) {
            this.completedData = pick(res.data, Object.keys(this.completedData))
          }
        })
      }
    },
    getData(data) {
      if (data && data.length > 0) {
        this.activeKey = ['1', '2']
      } else {
        this.activeKey = ['1']
      }
    },
    init() {
      this.clickTabLoad = false
      const timer = setTimeout(() => {
        this.clickTabLoad = true
        clearTimeout(timer)
      }, 200)
      this.$checkRequireItem()
      const { type, code, level, btype, businessId, procInstId, name, processName, detailUrl, taskId, taskDefKey } = this.$route.query
      if (type) {
        this.assignType = type
        this.assignCode = code
        this.assignLevel = level
        this.businessType = btype
      }
      this.id = businessId.replace("_knowledge", '')
      if (!this.id) {
        this.$error({ content: '无指定业务ID，将自动关闭' })
        setTimeout(() => {
          window.close()
        }, 1500)
        return
      }
      this.procInstId = procInstId
      this.taskName = decodeURIComponent(name)
      this.processName = decodeURIComponent(processName)
      document.title = this.processName + '-' + this.taskName
      if (detailUrl) {
        this.detailUrl = decodeURIComponent(detailUrl)
        if (this.detailUrl.indexOf('btnNoShow=false') !== -1) {
          this.buttonConfig.no.isShow = false
        }
      }
      // else {
      //     this.detailUrl = '/process/auditBusinessDetail'
      // }
      this.taskId = taskId
      this.taskDefKey = taskDefKey
      this.currentTime = moment().format('YYYY-MM-DD HH:mm:ss')
      this.currentUser = Vue.getAcloudProvider().getUserInfo()
      //获取流程节点执行情况
      this.getProcessNodes()
      this.getEditInfo()
    },
    //切换tab,更新数据
    clickTabRouter() {
      this.init()
      console.log(this.$route.query)
    },
    getFlowChartReq() {
      this.loading.flowChart = true
      getFlowChart(this.id)
        .then((res) => {
          this.loading.flowChart = false
          if (res.code === 200) {
            this.flowChart = 'data:image/png;base64,' + res.data
          }
        })
        .catch(() => {
          this.loading.flowChart = false
        })
    },
    getProcessNodes() {
      this.flowRequesting = true
      getProcessNodeList({ procInstId: this.procInstId, pageNo: 1, pageSize: 100 })
        .then((res) => {
          if (res.code === 200) {
            const data = res.data
            const userIds = data.map((d) => {
              if (d.formData) {
                d.formData = JSON.parse(d.formData)
              }
              return d.assignee
            })
            getOrgEmployeesListBy({ userIds, delete: true }).then((employees) => {
              this.flowRequesting = false
              res.data.forEach((r) => {
                employees.data.some((e) => {
                  if (e.userId === r.assignee) {
                    r.userName = e.name
                    return true
                  }
                })
              })
              this.approveInfos = res.data
              console.log(res.data)
            })
          }
        })
        .catch(() => {
          this.flowRequesting = false
        })
    },
    /**
     * @description: 审批
     * @param {boolean} reject 是否不通过
     * @param {object} subordinateApproverList 下级审批人
     * @return {promise}
     */
    submit(reject, subordinateApproverList = {}) {
      const userInfo = Vue.getAcloudProvider().getUserInfo()
      const data = {
        formData: {
          opinions: this.opinions,
          reject,
          projectId: '',
          postId: userInfo?.currentPost?.postId || '',
          postCode: userInfo?.currentPost?.postCode || ''
        },
        assignTypeEnum: this.assignType, //指派类型
        assgins: this.form.respEmployeeId, //人员
        groupEnum: this.form.jobsSelectedName, //岗位
        procInstId: this.procInstId,
        taskId: this.taskId,
        userId: this.currentUser.id,
        variables: {
          reject,
          ...this.submitData,
          ...subordinateApproverList
        }
      }
      return completeTask(data)
        .then((res) => {
          if (res.status === 200) {
            notifyParentWindow() // 通知父窗口
            // this.$success({
            //   content: '审批提交成功，即将自动关闭当前窗口',
            //   onOk() {
                window.close()
            //   }
            // })
            // setTimeout(() => {
            //   window.close()
            // }, 2000)
          } else {
            this.$error({ content: '审批提交失败，请稍后重试' })
          }
          return res
        })
        .catch((err) => {
          return err
        })
    },
    async handelUnApproval() {
      this.$bus.$emit('handelUnApproval')
      const callbackFn = this.callbackFn
      if (callbackFn && !callbackFn('unApproval')) return

      //remark2020/12/31 修改下面的方法请同步修改handelUnApprovalCopy方法
      // 审批不通过
      if (!this.opinions) {
        this.$warning({ content: '请填写审批意见' })
        return
      }
      const confirmWin = this.$confirm({
        title: '警告提醒！',
        content: '确定审批不通过？',
        okType: 'danger',
        onOk: async () => {
          if (this.beforeSubmitFn) {
            if (!(await this.beforeSubmitFn({ agree: false, opinion: this.opinions }))) {
              return
            }
          }
          return new Promise((resolve, reject) => {
            this.submit(true)
              .then(() => {
                resolve()
                confirmWin.destroy()
              })
              .catch(() => reject)
          }).catch(() => this.$error({ content: '审批提交失败，请稍后重试' }))
        },
        onCancel: () => {}
      })
    },
    async handelUnApprovalCopy() {
      // 审批不通过
      if (!this.opinions) {
        this.$warning({ content: '请填写审批意见' })
        return
      }
      const confirmWin = this.$confirm({
        title: '警告提醒！',
        content: '确定审批不通过？',
        okType: 'danger',
        onOk: async () => {
          if (this.beforeSubmitFn) {
            if (!(await this.beforeSubmitFn({ agree: false, opinion: this.opinions }))) {
              return
            }
          }
          return new Promise((resolve, reject) => {
            this.submit(true)
              .then(() => {
                resolve()
                confirmWin.destroy()
              })
              .catch(() => reject)
          }).catch(() => this.$error({ content: '审批提交失败，请稍后重试' }))
        },
        onCancel: () => {}
      })
    },

    async handelApproval() {
      this.$bus.$emit('handelApproval')
      const callbackFn = this.callbackFn
      if (callbackFn && !callbackFn('approval')) return

      //remark2020/12/31 修改下面的方法请同步修改handelApprovalCopy方法
      // 审批通过
      const confirmWin = this.$confirm({
        title: '警告提醒！',
        content: '确定审批通过？',
        okType: 'danger',
        onOk: async () => {
          if (this.beforeSubmitFn) {
            if (!(await this.beforeSubmitFn({ agree: true, opinion: this.opinions }))) {
              return
            }
          }
          return new Promise((resolve, reject) => {
            this.submit(false, this.createApproverList(this.subApproverList))
              .then(() => {
                resolve()
                confirmWin.destroy()
              })
              .catch(() => reject)
          }).catch(() => this.$error({ content: '审批提交失败，请稍后重试' }))
        },
        onCancel() {}
      })
    },
    /**
     * @description: 组装下级审批人数据
     * @param {array} subApproverList 下级审批人表格数据
     * @return {object} 下级审批人数据
     */
    createApproverList(subApproverList) {
      const subordinateApproverList = {}
      subApproverList.forEach((item) => {
        if (item?.approver && item.approver.length > 0) {
          subordinateApproverList[item.taskInfo.id] = {
            assgins: item.approver?.map((el) => el.key).join(','),
            assignTypeEnum: 2
          }
        }
      })
      return subordinateApproverList
    },
    async handelApprovalCopy() {
      // 审批通过
      const _this = this
      const confirmWin = this.$confirm({
        title: '警告提醒！',
        content: '确定审批？',
        okType: 'danger',
        onOk: async () => {
          if (this.beforeSubmitFn) {
            if (!(await this.beforeSubmitFn({ agree: true, opinion: this.opinions }))) {
              return
            }
          }
          return new Promise((resolve, reject) => {
            this.submit(false, this.createApproverList(this.subApproverList))
              .then(() => {
                resolve()
                confirmWin.destroy()
              })
              .catch(() => reject)
          }).catch(() => this.$error({ content: '审批提交失败，请稍后重试' }))
        },
        onCancel() {}
      })
    },
    //批量审批
    completeTaskBathFn(data) {
      const userInfo = Vue.getAcloudProvider().getUserInfo()
      let reqArr = []
      if (data.length) {
        data.map((item) => {
          reqArr.push({
            formData: {
              opinions: item.opinion,
              reject: item.reject * 1 === 1 ? false : true,
              projectId: '',
              postId: userInfo?.currentPost?.postId || '',
              postCode: userInfo?.currentPost?.postCode || ''
            },
            assignTypeEnum: this.assignType, //指派类型
            assgins: this.form.respEmployeeId, //人员
            groupEnum: this.form.jobsSelectedName, //岗位
            procInstId: item.procInstId,
            taskId: item.taskId,
            userId: this.currentUser.id,
            variables: {
              reject: item.reject * 1 === 1 ? false : true
            }
          })
        })
      }

      this.$confirm({
        title: '提示',
        content: '确定提交审批？',
        onOk: () => {
          return completeTaskBath(reqArr)
            .then((res) => {
              if (res.status === 200) {
                notifyParentWindow() // 通知父窗口
                // this.$success({
                //   content: '审批提交成功，即将自动关闭当前窗口',
                //   onOk() {
                    window.close()
                //   }
                // })
                // setTimeout(() => {
                //   window.close()
                // }, 2000)
              } else {
                this.$error({ content: '审批提交失败，请稍后重试' })
              }
              return res
            })
            .catch((err) => {
              return err
            })
        }
      })
    }
  }
}
</script>

<style lang='less' scoped>
@deep: ~'>>>';
.img-wrapper {
  padding: 10px 0;
}

.wrapper {
  padding: 20px;

  .title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
  }

  /deep/ .approval-item .ant-form-item-control-wrapper {
    width: 100%;
  }
  @{deep} .ant-collapse > .ant-collapse-item > .ant-collapse-header {
    background-color: #fff;
    font-size: 16px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.65);
    .ant-collapse-arrow {
      right: 16px;
      left: auto;
    }
  }
  @{deep} .ant-collapse > .ant-collapse-item > .ant-collapse-header::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    width: 5px;
    margin-top: -10px;
    height: 21px;
    background-color: #1890ff;
  }
}

.wrapper-row {
  padding-left: 55px;
  font-weight: bold;
  letter-spacing: 1px;
}

/deep/ .ant-form-item label {
  font-size: 12px;
}

/deep/ .ant-btn {
  border-radius: 5px;
}

/deep/ .ant-input {
  /*width: 70%;*/
  border-radius: 5px;
}

/deep/ .ant-card.ant-card-bordered {
  border-radius: 5px;
}

.ant-avatar-lg {
  width: 48px;
  height: 48px;
  line-height: 48px;
}

.list-content-item {
  color: rgba(0, 0, 0, 0.45);
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  margin-left: 40px;

  span {
    line-height: 20px;
  }

  p {
    margin-top: 4px;
    margin-bottom: 0;
    line-height: 22px;
  }
}

.title-name {
  border-left: 5px solid #1890ff;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 20px;
  padding-left: 15px;
  height: 20px;
  line-height: 20px;
}

/deep/ .table-page-search-wrapper .ant-form-inline .ant-row .ant-col.ant-col-sm-24.ant-col-md-12 {
  padding-left: 80px;
}

/deep/ .ant-form-item .ant-form-item-control-wrapper {
  /*width: 100%;*/
}

/deep/ .col .ant-form-item .ant-form-item-control-wrapper {
  width: calc(100% - 135px);
}
</style>

